<template>
	<section>	
	<el-col :span="12">
	<div calss="bor" style="padding:0 10px 0 10px;border: 1px solid #bfcbd9;height: 615px;">
	<h3>数据字典</h3>
	<!-- 工具条 -->
	<el-row class="tool" >
	
		<el-form :inline="true" :model="filters">
			<el-col :span="12">
				<el-form-item>
					<el-button type="primary" size="small" icon="plus" @click="handleAdd()">字典分类录入</el-button>
					<!-- <el-button type="primary" size="small" icon="edit" @click="handleEdit()" >编辑</el-button> -->
					<!-- <el-button type="primary" size="small" icon="edit" @click="handleView()" >角色编辑</el-button> 					 -->
				</el-form-item>
			</el-col>
			<el-col :span="12" class="to-right">
				<el-form-item style="margin-right: 0;" class="short-form">
					<el-select v-model="filters.type" size="small">
						<el-option label="字典名称" value="typeGroupName"></el-option>
						<el-option label="字典编码" value="typeGroupCode"></el-option>						
					</el-select>
				</el-form-item>
				<el-form-item class="short-form">
					<el-input placeholder="请输入关键字" icon="search" v-model="filters.search"
					  :on-icon-click="handleKeySearch" size="small">
					</el-input>
				</el-form-item>
			</el-col>
		</el-form>
	
	</el-row>
	
	<!-- 列表 -->
	<el-table :data="table" highlight-current-row v-loading="listLoading" @current-change="selsChange" style="width: 100%;" border height="460">
      	<el-table-column type="index" width="55">
      	</el-table-column>
      	<el-table-column prop="typeGroupName" label="字典名称" min-width="130" sortable>
      	</el-table-column>
      	<el-table-column prop="typeGroupCode" label="字典编码" min-width="130" sortable>
      	</el-table-column>
      	<el-table-column label="操作" fixed="right" width="200">
			<template scope="scope" >
			  <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			  <el-button size="small" type="primary" @click="handleManage(scope.$index, scope.row)">查看</el-button>
			  <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<!--工具条-->
	<el-col :span="24" class="toolbar">
		<el-pagination
		 small
		 @size-change="handleSizeChange"
	     @current-change="handleCurrentChange"
	     :current-page="currentPage"
	     :page-sizes="[10, 20, 30]"
	     :page-size="size"
	     layout="total, sizes, prev, pager, next, jumper"
	     :total="totals" 
		 style="float:right;">
      	</el-pagination>
	</el-col>

	</div>
	</el-col>
	
	<!-- 字典分类录入/编辑 -->
	<el-dialog :title="dialog.dialogTitle" v-model="addFormVisible" :close-on-click-modal="false">
		<el-form :model="addForm" label-width="80px" ref="addForm" :rules="addrules">
			<el-form-item label="编码" prop="typeGroupCode" :label-width="formLabelWidth">
				<el-input v-model="addForm.typeGroupCode" auto-complete="off" placeholder="编码范围在2~50位字符"></el-input>        
            </el-form-item>
            <el-form-item label="名称" prop="typeGroupName" :label-width="formLabelWidth">
				<el-input v-model="addForm.typeGroupName" auto-complete="off" placeholder="名称范围在2~50位字符"></el-input>       
            </el-form-item>
            <el-form-item label="复合字典" prop="isComplex" :label-width="formLabelWidth">
				<el-select v-model="addForm.isComplex" placeholder="" >
            		<el-option
            		    v-for="(item,index) in options"
                		:key="index"
            		    :label="item.label"
            		    :value="item.value">
            		</el-option>
            	</el-select>       
            </el-form-item>
            
		</el-form>
		<div slot="footer" class="dialog-footer">
        		<el-button @click.native="addFormVisible = false">取消</el-button>
        		<el-button type="primary" @click.native="addSubmit" >提交</el-button>
      		</div>
	</el-dialog>

	<el-col :span="12">
		<div calss="bor" style="padding:0 10px 0 10px;border: 1px solid #bfcbd9;" v-loading="roleLoading"> 
			<h3>字典类型：{{ditionarytype}}</h3>
			<div v-if="roleModule">
				<p>字典项列表</p>
				<div class="btn-group">
					<el-button type="primary" size="small" icon="plus" @click="handleAdd2()">添加</el-button>
					<!-- <el-button type="primary" size="small" icon="edit" @click="handleEdit2()" >编辑</el-button> -->
				</div>
				<!-- 列表 -->
				<template>
			      <div class="tacheTree">
			        <el-row >
			          <el-col :span="6" class="lightGray">名称</el-col>
			          <el-col :span="6" class="lightGray">代码</el-col>
			          <el-col :span="6" class="lightGray">父类型名称</el-col>
			          <el-col :span="6" class="lightGray">操作</el-col>
			        </el-row>
			        <el-tree
			          :data="treeList"
			          :props="defaultProps"
			          :load="loadNode"
			          node-key="id"
			          lazy
			          :expand-on-click-node="false"
			          @node-click="handleNodeClick"
			          :render-content="renderContent"
			          class="treeDivs">
			        </el-tree>
			      </div>
				</template>
			</div>		
		</div>
	</el-col>
	
	<el-dialog :title="dialog.dialogTitle" v-model="editFormVisible" :close-on-click-modal="false">
		<el-form :model="editForm" label-width="80px" ref="editForm" :rules="editrules">
			<el-form-item label="字典分类" prop="typeGroupName" :label-width="formLabelWidth">
				<el-input v-model="editForm.typeGroupName" auto-complete="off" disabled></el-input>        
            </el-form-item>
            <el-form-item label="父字典名称" prop="typeId" :label-width="formLabelWidth">
	            <el-input
	              placeholder="请选择"
	              v-model="editForm.depart"
	              readonly="readonly"
	              ref="depart1"
	              :value="editForm.typeId"
	              @click.native="isShow1=!isShow1">
	            </el-input>
            	<el-tree
	              v-show="isShow1"
	              class="box-tree"
	              node-key="id"
	              ref="depart1"
	              empty-text="暂无数据"
	              :data="department.regions"
	              :props="department.props"
	              :load="loadNode2"
	              :expand-on-click-node="false"
	              lazy
	              @node-click="handleNodeClick2">
	            </el-tree>
				<!-- <el-select v-model="editForm.typeId" placeholder="" >
            		<el-option
            		    v-for="item in typeGroupCodeoptions"
            		    :label="item.text"
            		    :value="item.id">
            		</el-option>
            	</el-select> -->       
            </el-form-item>			
            <el-form-item label="复合字典" prop="hasSub" :label-width="formLabelWidth">
            	
				<el-select v-model="editForm.hasSub" placeholder="" >
            		<el-option
            		    v-for="(item,index) in options"
                		:key="index"
            		    :label="item.label"
            		    :value="item.value">
            		</el-option>
            	</el-select>       
            </el-form-item>
            <el-form-item label="字典Code" prop="typeCode" :label-width="formLabelWidth">
				<el-input v-model="editForm.typeCode" auto-complete="off" placeholder="编码范围在2~50位字符"></el-input>        
            </el-form-item>
            <el-form-item label="字典名称" prop="typeName" :label-width="formLabelWidth">
				<el-input v-model="editForm.typeName" auto-complete="off" placeholder="名称范围在2~50位字符"></el-input>       
            </el-form-item>
            
		</el-form>
		<div slot="footer" class="dialog-footer">
        		<el-button @click.native="editFormVisible = false">取消</el-button>
        		<el-button type="primary" @click.native="editSubmit" >提交</el-button>
      		</div>
	</el-dialog>

	</section>
</template>
<script>
	import NProgress from 'nprogress'
  	import {dataList,ditionaryList,addData,delTypeGroup,getTypeComboTree,saveType,delType,getTypeData,getTypeGroupData} from '../../api/system';
	export default {
	data() {
	 return {
	 	listLoading:false,
	 	isShow1:false,
	 	sels1:'',
	 	sels2:'',
	 	table:[],
	 	filters:{
			type:'typeGroupName',
			search:'',
			typeGroupId: ''
		},

		page: 1,
        totals:0,
        size:10,
        currentPage:1,

        roleLoading:false,
        roleModule:false,
        ditionarytype:'',
        ditionaryData:[],

        dialog: {
			dialogType: 0,
			dialogTitle: ''
		},
        addFormVisible:false,
        formLabelWidth:"100px",
        addForm:{isComplex:''},
        addrules:{
        	typeGroupCode:[{ required: true, message: '请输入编码', trigger: 'blur' },
        	{ min: 2, max: 50, message: '编码范围在2~50位字符', trigger: 'blur' }],

        	typeGroupName:[{ required: true, message: '请输入名称', trigger: 'blur' },
        	{ min: 2, max: 50, message: '编码范围在2~50位字符', trigger: 'blur' }],
        },
        options:[{label:'是',value:'1'},{label:'否',value:'0'}],

        editForm:{},
        editFormVisible:false,
        selsData:'',
        department:{
	      regions: [],
	          props: {
	            label: 'text',
	            children: 'id'
	          }
	    },
	    nodeData:'',
        // typeGroupCodeoptions:[],
        select:{},
        editrules:{
        	typeCode:[{ required: true, message: '请输入字典Code', trigger: 'blur' },
        	{ min: 2, max: 50, message: '编码范围在2~50位字符', trigger: 'blur' }],

        	typeName:[{ required: true, message: '字典名称', trigger: 'blur' },
        	{ min: 2, max: 50, message: '编码范围在2~50位字符', trigger: 'blur' }],
        	
        },

        treeList: [],
	 	defaultProps: {
          value:'id',
          label: 'text',
          children:'children'
        },
        ss:[],
        saveTypeId:'',
	 }
	},

	methods:{
		//字典分类录入 
		handleAdd(){
			this.dialog.dialogTitle = '录入';
			this.dialog.dialogType = 0;
			this.addForm={
				typeGroupCode:'',
				typeGroupName:'',
				isComplex:'',
			};
			this.addFormVisible = true;
		},
		addSubmit(){
			let para=this.addForm;
			if(this.dialog.dialogType == 0){
				addData(para).then(()=>{
					this.getList(0);
				});
				this.addFormVisible = false;
			}else if(this.dialog.dialogType == 1){
				para.id=this.sels1.id;
				addData(para).then(()=>{
					this.getList(0);
				});
				this.addFormVisible = false;
			};
			
		},
		//角色编辑
		handleEdit(index,row){
			// console.log(row);
			this.dialog.dialogTitle = '编辑';
			this.dialog.dialogType = 1;
			this.addFormVisible = true;
			this.selsData = row.id;
			var para={
				id:this.selsData
			};
			getTypeGroupData(para).then((res)=>{
				this.addForm = res.obj;
				// console.log(res.obj);
			});
		},

		
		// 添加
		handleAdd2(){
			this.dialog.dialogTitle = '添加';
			this.dialog.dialogType = 0;
			this.editFormVisible=true;
        	this.getList(2);
			this.editForm={
				typeId:'',
				hasSub:'',
				typeCode:'',
				typeName:'',
			};
			this.editForm.typeGroupCode=this.sels1.typeGroupCode;
		},
		editSubmit(){
			// alert(this.dialog.dialogType);
			let para=this.editForm;
			para.typeGroupId=this.sels1.id;
			para.typeGroupCode=this.sels1.typeGroupCode;
			if(this.dialog.dialogType == 0){
				// alert(1);
				// delete para.id;
				saveType(para).then(()=>{
					this.getList(1);
				});
				this.editFormVisible = false;
			}else if(this.dialog.dialogType == 1){
				// alert(2);
				para.id=this.saveTypeId;
				console.log(para.id);
				saveType(para).then(()=>{
					this.getList(1);
				});
				this.editFormVisible = false;
				
			};

		},
		// 编辑
		handleEdit2(data){
			this.dialog.dialogTitle = '编辑';
			this.dialog.dialogType = 1;
			this.editFormVisible=true;
			// console.log(data);
			this.saveTypeId = data.id;
			this.getList(2);
			var para={
				typeGroupId:this.sels1.id,
				id:data.id
			};
			getTypeData(para).then((res)=>{
				// console.log(res);
				this.editForm=res.obj;
				this.editForm.depart=res.obj.pTypeName;
				this.editForm.typeId=res.obj.typeId;
			});

		},
		//加载树结点
	    loadNode2(node, resolve) {
	    	this.nodeData=node.data.id;
	    	var params={
				getTypeComboTree:'',
				// typeGroupId:this.sels1.id
			};
			if(this.nodeData){
				params.parentid = node.data.id;
			}else{
				params.parentid = 0;
			}
			
			console.log(params.parentid);
			params.typeGroupId=this.sels1.id;
	    	getTypeComboTree(params).then(res => {   
		        return resolve(res);
		        var data;  
		        if(res.length){
		            data=res;
		          }
		          else{data=[];}
		          resolve(data);
		      });
	       },
	    handleNodeClick2(data,node){
	      // console.log(data);
	        this.editForm.typeId = data.id;
	        this.editForm.depart = data.text;
	        this.isShow1=!this.isShow1;
	      },
		
		// 搜索
		handleKeySearch(){
			this.listLoading = true;
			let params = {
				page: this.currentPage,
				rows: this.size,
				searchfield:this.filters.type,

			};
			params.field="id,typeGroupName,typeGroupCode,";
			if(this.filters.type == 'typeGroupName'){
				params.typeGroupName = this.filters.search;
			};
			if(this.filters.type == 'typeGroupCode'){
				params.typeGroupCode = this.filters.search;
			};
			// if(this.filters.type == null){

			// };
			dataList(params).then((res)=>{
          		this.table=res.rows;
          		this.totals = Number(res.total);
          		this.listLoading = false;
          	});
		},

		//列表切换列表页
        handleCurrentChange(val) {
          this.currentPage = val;
          if(this.filters.search==null){
            this.getList(0);
          }else{
            this.handleKeySearch();
          };
          // this.getList(0);
        },
        //列表切换显示条数
        handleSizeChange(val){
          this.size = val;
          if(this.filters.search==null){
            this.getList(0);
          }else{
            this.handleKeySearch();
          };
          // this.getList(0);
        },
		// 获取列表
		getList(index,id){
			let para = {
          		page: this.currentPage,
          		rows: this.size,
          		
          	};
          	if(index==0){
	          	this.listLoading = true;
	          	para.field="id,typeGroupName,typeGroupCode,";
	          	dataList(para).then((res)=>{
	          		this.table=res.rows;
	          		this.totals = Number(res.total);
	          		this.listLoading = false;
	          	});
          	}
          	else if(index==1){
          		this.roleLoading = true;
          		para.typeGroupId = this.filters.typeGroupId;
	          	para.field="code,id,parentid,,parentname,state,text";
	          	ditionaryList(para).then((res)=>{
	          		this.treeList=res;
	          		this.roleLoading = false;
	          	});
          	}
          	else if(index==2){
          		var params={
          			getTypeComboTree:'',
          			typeGroupId:this.filters.typeGroupId
          		};
	          	getTypeComboTree(params).then((res)=>{
	          		this.ss=res;
	          		this.department.regions=res;
	          	});
	          	// alert(1);
          	}
		},
		selsChange (sels) {
        	this.sels1 = sels;
        	// console.log(this.sels1);
      	},
      	// selsChange2(sels) {
       //  	this.sels2 = sels;
       //  	// console.log(this.sels2);
      	// },

		// 删除
		handleDelete(index,row){
			var para={id:row.id};
			// console.log(para);
			delTypeGroup(para).then(()=>{
				this.getList(0);
			});
			
		},
		// 删除2
		handleDelete2(data){
			var para={id:data.id};
			delType(para).then(()=>{
				this.getList(1);
			});
		},
		// 查看
		handleManage(index,row){
			// console.log(row);
        	this.roleLoading=true;
        	this.roleModule=true;
        	this.filters.typeGroupId=row.id;
        	this.getList(1);
        	this.ditionarytype=row.typeGroupName;

		},
		handleNodeClick(data,node) {

		},
		loadNode(node, resolve) {
		      
	      let params={
	        field:"code,id,parentid,,parentname,state,text"
	      };
	      params.id=node.data.id;
	      params.typeGroupId=this.sels1.id;
	      ditionaryList(params).then(res => {   
	        return resolve(res);
	        var data;  
	        if(res.length){
	            data=res;
	          }
	          else{data=[];}
	          resolve(data);
	      });
	    },
		renderContent(h, { node, data, store }) {      
        let html;
          
          html=<span class="clearfix">
                  <span style="float: right;margin-right: 20px;">
                  	<el-button size="small" type="danger" on-click={()=>this.handleDelete2(data)}>删除</el-button>
                    <el-button size="small" type="warning" on-click={()=>this.handleEdit2(data)}>编辑</el-button>
                  </span>
                  <span style="display: inline-block; width: 23.6676%;">
                    {data.text}
                  </span>
                  <span style="display: inline-block; width: 23.84%;">
                    {data.code}
                  </span>
                  <span style="display: inline-block; width: 23.84%;">
                    {data.parentname}
                  </span>
               </span>
          
        	return(html);
    	},


	},

	activated:function() {
		this.getList(0);
    },
}
</script>
<style scoped>
	h3{
		line-height: 30px;
		border-bottom: 1px solid #eee;
	}
	.to-right{
		text-align: right;
	}
	.short-form{
		width: 45%;
	}
	.tool{
		/*padding-top: 2px;*/
		padding-left: 10px;
	}
	.btn-group{
		padding-bottom: 10px;
	}
	.lightGray{
	    background: #E5E9F2;
	    height: 100%;
	    line-height: 40px;
	    text-align: center;
	    border-right: 1px solid #fff;
	}
  	.box-tree{
      position: absolute;
      overflow: auto;
      z-index: 100;
      width: 100%;
    }
    .treeDivs{
    	max-height: 406px;
    	overflow-y: scroll;
    }
	/*.el-dialog--small {
    	width: 25%;
	}*/
	/*.bor{
		padding:0 10px 0 10px;border: 1px solid #bfcbd9;
	}*/

</style>